<template>
    <div class="container">
      <div class="tips-title">1.基础用法</div>
      <el-popover
        placement="top"
        title="标题"
        width="200"
        trigger="hover"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
      >
        <el-button slot="reference">hover 激活</el-button>
      </el-popover>
      <el-popover
        placement="top"
        trigger="click"
        :title="testTitle"
        :width="testWidth"
        :content="testContent"
      >
        <el-button slot="reference">click 激活</el-button>
      </el-popover>
      <el-popover
        ref="popover"
        placement="top"
        trigger="focus"
        :title="testTitle"
        :width="testWidth"
        :content="testContent"
      >
      </el-popover>
      <el-button v-popover:popover>focus 激活</el-button>
      <el-popover
        placement="top"
        trigger="manual"
        :title="testTitle"
        :width="testWidth"
        :content="testContent"
        v-model="visible">
        <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
      </el-popover>
      <div class="tips-title">2.嵌套信息</div>
      <el-popover
        placement="right"
        width="450"
        trigger="click">
        <el-table :data="gridData">
          <el-table-column width="150" property="date" label="日期"></el-table-column>
          <el-table-column width="100" property="name" label="姓名"></el-table-column>
          <el-table-column width="300" property="address" label="地址"></el-table-column>
        </el-table>
        <el-button slot="reference">click 激活</el-button>
      </el-popover>
      <div class="tips-title">3.嵌套操作</div>
      <el-popover
        placement="top"
        width="160"
        v-model="visible2">
        <p>这是一段内容这是一段内容确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="cancel">取消</el-button>
          <el-button type="primary" size="mini" @click="done">确定</el-button>
        </div>
        <el-button slot="reference">删除</el-button>
      </el-popover>
    </div>
</template>
<script>
  const testData1 = [
    {date: '2020-05-11',name: 'bangZZ 1',address: '广州市白云区'},
    {date: '2019-05-10',name: 'bangZZ 2',address: '广州市花都区'},
    {date: '2018-05-9',name: 'bangZZ 3',address: '广州市天河区'}
  ];

  export default {
    name: 'o-popover',
    data() {
      return {
        testTitle: '标题',
        testWidth: '200',
        testContent: "这是一段内容,这是一段内容,这是一段内容,这是一段内容。",
        visible: false,

        gridData: testData1,

        visible2: false
      }
    },
    methods:{
      cancel(){
        this.visible2 = false;
      },
      done(){
        this.$message({
          message: '成功!!!',
          type: 'success'
        });
        this.visible2 = false;
      }
    }
  }
</script>
<style>
</style>
